<template>
  <section class="todoapp">
	<header class="header">
		<h1>todos</h1>
		<input
			class="new-todo"
			placeholder="What needs to be done?"
			autofocus
			v-model="name"
			@keydown.enter="addTodo"
		>
	</header>

	<section class="main">
		<input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll">
		<label for="toggle-all">Mark all as complete</label>
		<ul class="todo-list">
			<li :class="{completed: item.flag}" v-for="item in list" :key="item.id">
				<div class="view">
					<input class="toggle" type="checkbox" v-model="item.flag">
					<label>{{item.name}}</label>
          <!-- 删除功能绑定点击事件 -->
					<button class="destroy" @click="delTodo(item.id)"></button>
				</div>
				<input class="edit" value="Create a TodoMVC template">
			</li>
		</ul>
	</section>

	<footer class="footer" v-show="isShowFooter">
		<span class="todo-count"><strong>{{leftCounts}}</strong> item left</span>
		<ul class="filters">
			<li>
				<a class="selected" href="#/">All</a>
			</li>
			<li>
				<a href="#/active">Active</a>
			</li>
			<li>
				<a href="#/completed">Completed</a>
			</li>
		</ul>
		<button class="clear-completed" v-show="isShowClear">Clear completed</button>
	</footer>
</section>
</template>

<script>
import {reactive, toRefs, computed, watch } from 'vue'
export default {
  name: 'App',
  setup() {
    const state = reactive({
      list: JSON.parse(localStorage.getItem('list')) || [],
			name: ''
    })
    // 删除函数
    const delTodo = (id) => {
      console.log(id)
      //删除逻辑  保留所有不是该id的 项
      state.list = state.list.filter((obj) => obj.id !== id)
      // splice     map    for  都可以完成
    }

		// 添加函数
		const addTodo = () => {
			// 做个健全 当input框为空的时候不添加 给个提示
			if ( state.name.trim() === '') {
				alert('你是不是瞎,得输入啊')
				return
			}
			// 怎么添加
			state.list.unshift({
				id: +new Date(),
				name: state.name,
				flag: false
			})
			// 添加成功后清空
			state.name = ''
		}

    // 计算属性
    // 左侧剩余数量
    // const leftCounts = computed(() => {
    //   return state.list.filter((item) => item.flag === false).length
    // })
    // // 清楚按钮的显示
    // const isShowClear = computed(() => {
    //   return state.list.some((item) => item.flag === true)
    // })
    // // 显示底部
    // const isShowFooter = computed(() => {
    //   return state.list.length > 0
    // })
    // 随便定义的变量
    const computedData= {
      leftCounts : computed(() => {
        return state.list.filter((item) => item.flag === false).length
      }),
      isShowClear : computed(() => {
        return state.list.some((item) => item.flag === true)
      }),
      isShowFooter : computed(() => {
        return state.list.length > 0
      })
    }
    const isAll= computed({
      // get函数和set函数 是规定的语法
      get() {
         return state.list.every((item) => item.flag === true)
      },
      // 给数组里每一项的flag属性赋值成全选的状态
      set (val) {
        console.log(val)
        state.list.map(item => item.flag = val)
      }
    })

    // 只要list变化就缓存一下利用localStorage
    watch(() => state.list,(newValue) => {
      console.log('list', newValue)
      // 参数1 存的名字 随便起, 参数2 存的数据 只能是字符串
      localStorage.setItem('list', JSON.stringify(newValue))
    },{
      deep: true
    })

    return {
      ...toRefs(state),
      delTodo,
			addTodo,
      ...computedData,
      isAll
      // leftCounts,
      // isShowClear,
      // isShowFooter
    }
  }
}
</script>
